<template>

  <el-button type="primary" @click="add()" v-has-permission="'dicType:add'">录入字典类型</el-button>

  <!-- 字典类型列表 -->
  <!--
    :data  单向绑定表格数据

    @selection-change="handleSelectionChange"   选择改变事件
      勾选或者取消勾选复选框时触发该函数
      注意：这个函数使用的时候不需要加括号，函数触发时会自动传入参数，参数是勾选了复选框的选项数组
  -->
  <el-table
      :data="dicTypeList"
      style="width: 100%">

    <!-- type="index"  序号以1递增 -->
    <el-table-column type="index" label="序号" width="100px" />
    <el-table-column property="typeCode" label="字典类型代码" />
    <el-table-column property="typeName" label="字典类型名称" />
    <el-table-column property="remark" label="备注" />
    <el-table-column label="操作" >
      <!-- 作用域插槽 -->
      <template #default="scope">
        <!-- scope.row  获取当前行的数据对象 -->
        <el-button type="success" @click="edit(scope.row)" v-hasPermission="'dicType:edit'">编辑</el-button>
        <el-button type="danger" @click="remove(scope.row.id)" v-hasPermission="'dicType:remove'">删除</el-button>
      </template>
    </el-table-column>
  </el-table>

  <!--
    分页功能
      layout="prev, pager, next"  组件布局，子组件名用逗号分隔  prev, pager, next, jumper, ->, total
      @prev-click="toPage" 点击上一页触发函数
      @next-click="toPage" 点击下一页触发函数
      @current-change="toPage"  当前页发生改变时触发函数
      注意：这里的函数不要加括号，element-plus会自动传递一个参数（当前页数）
  -->
  <el-pagination
      background
      layout="prev, pager, next"
      :page-size="this.pageSize"
      :total="this.total"
      @prev-click="toPage"
      @next-click="toPage"
      @current-change="toPage"/>

  <!-- 字典类型信息弹窗（字典类型的录入和编辑共用此弹窗） -->
  <el-dialog
      v-model="dicTypeDialogVisible"
      :title="this.dicTypeQuery.id > 0 ? '编辑字典类型' : '录入字典类型'"
      width="55%"  center  draggable
      :close-on-click-modal="false"
      :destroy-on-close="true">

    <!-- :model       表单绑定的数据 -->
    <!-- label-width  表单整体距离左侧的宽度 -->
    <!-- :rules       绑定验证规则 -->
    <!-- ref          表单提交之前验证表单的验证规则 -->
    <el-form :model="dicTypeQuery" label-width="130px" :rules="dicTypeRules" ref="dicTypeRefForm">

      <!-- 字典类型代码 -->
      <el-form-item label="字典类型代码" prop="typeCode">
        <el-input v-model.trim="dicTypeQuery.typeCode" />
      </el-form-item>

      <!-- 字典类型名称 -->
      <el-form-item label="字典类型名称" prop="typeName">
        <el-input v-model.trim="dicTypeQuery.typeName" />
      </el-form-item>

      <!-- 备注 -->
      <el-form-item label="备注">
        <el-input v-model.trim="dicTypeQuery.remark" />
      </el-form-item>

      <el-form-item>
        <!-- 根据用户不同的操作调用不同的执行方法 -->
        <!-- id值大于0，则表明是编辑，否则就是录入，因为编辑的时候查询了信息，所以id值一定大于0 -->
        <el-button type="primary" @click="this.dicTypeQuery.id > 0 ? editDicType() : addDicType()">提交</el-button>
        <el-button @click="this.dicTypeDialogVisible = false">关闭</el-button>
      </el-form-item>

    </el-form>

  </el-dialog>

</template>

<script>
  import {doDelete, doGet, doPost, doPut} from "../http/httpRequest.js";
  import {messageConfirm, messageTip} from "../util/util.js";

  export default {
    name: "DicTypeView",

    // 注入父组件的函数
    inject: ['reload'],

    data() {
      return {
        // 字典类型列表
        dicTypeList: [ ],

        // 分页参数
        pageSize: 0,
        total: 0,

        // 字典类型对象对话框是否可见
        dicTypeDialogVisible: false,

        // 字典类型对象
        dicTypeQuery: { },

        // 字典类型表单的验证规则
        dicTypeRules: {
          typeCode: [
            { required: true, message: '请输入字典类型代码', trigger: 'blur' }
          ],
          typeName: [
            { required: true, message: '请输入字典类型名称', trigger: 'blur' }
          ]
        }
      }
    },

    // 钩子函数，页面渲染完成后自动执行
    mounted() {
      // 加载字典类型列表（第一页）
      this.loadDicTypeList(1);
    },

    methods: {
      // 加载字典类型列表
      loadDicTypeList(current) {
        // 向后端发送请求
        doGet("/api/dicType/list", {
          // 要查询第几页数据
          current: current
        }).then( (resp) => {
          if (resp.data.code === 200) {
            // 字典类型列表
            this.dicTypeList = resp.data.data.list;
            // 分页参数
            this.pageSize = resp.data.data.pageSize;
            this.total = resp.data.data.total;
          } else {
            messageTip("字典类型列表加载失败", "error");
          }
        })
      },

      // 分页函数
      toPage(current) {
        this.loadDicTypeList(current);
      },

      // 录入字典类型按钮
      add() {
        // 清空字典类型对象信息
        this.dicTypeQuery = { };

        // 弹出对话框
        this.dicTypeDialogVisible = true;
      },

      // 编辑按钮
      edit(dicType) {
        // 将传入的字典类型对象信息显示到对话框中
        this.dicTypeQuery.id = dicType.id;
        this.dicTypeQuery.typeCode = dicType.typeCode;
        this.dicTypeQuery.typeName = dicType.typeName;
        this.dicTypeQuery.remark = dicType.remark;

        // 弹出对话框
        this.dicTypeDialogVisible = true;
      },

      // 提交按钮（录入）
      addDicType() {
        // 验证表单规则
        this.$refs.dicTypeRefForm.validate( (isValid) => {
          if (isValid) {
            // 使用FormData对象传参
            let formData = new FormData();
            // 将dicType对象的属性添加到FormData对象中
            for (let field in this.dicTypeQuery) {
              formData.append(field, this.dicTypeQuery[field]);
            }
            // 向后端发送请求
            doPost("/api/dicType/add", formData).then( (resp) => {
              if (resp.data.code === 200) {
                messageTip("录入成功", "success");
                // 返回刷新页面
                this.reload();
              } else {
                messageTip("录入失败", "error");
              }
            })
          }
        })
      },

      // 提交按钮（编辑）
      editDicType() {
        // 验证表单规则
        this.$refs.dicTypeRefForm.validate( (isValid) => {
          if (isValid) {
            // 使用FormData对象传参
            let formData = new FormData();
            // 将字典类型对象的属性添加到FormData对象中
            for (let field in this.dicTypeQuery) {
              formData.append(field, this.dicTypeQuery[field]);
            }
            // 向后端发送请求
            doPut("/api/dicType/edit", formData).then( (resp) => {
              if (resp.data.code === 200) {
                messageTip("编辑成功", "success");
                // 返回刷新页面
                this.reload();
              } else {
                messageTip("编辑失败", "error");
              }
            })
          }
        })
      },

      // 删除按钮
      remove(id) {
        // 弹出确认框
        messageConfirm("确认删除该数据吗?").then(() => {
          // 向后端发送请求
          doDelete("/api/dicType/remove/" + id, { }).then( (resp) => {
            if (resp.data.code === 200) {
              messageTip("删除成功", "success");
              // 刷新页面
              this.reload();
            } else {
              messageTip("删除失败，原因：" + resp.data.msg, "error");
            }
          })
        }).catch(() => {
          messageTip("取消删除", "warning");
        })
      }
    }
  }
</script>

<style scoped>

  /* 表格 */
  .el-table {
    margin-top: 20px;  /* 上侧外边距 */
  }

  /* 分页栏 */
  .el-pagination {
    margin-top: 20px;  /* 上侧外边距 */
  }

</style>

